<template>
    <div class="xbsj_box" :class="{preview:previewRef}"><!-- sino更新 -->
        <!-- 导航以及模块面板 -->
        <div class="xbsj_header">
            <!-- sino更新 -->
            <Menu :navList="navList"  :navType="navType" :key="navList" :preview="previewRef" :name="name"></Menu>
        </div>
        <!-- 视口 -->
        <div class="xbsj_earth" ref="xbsjEarth">
            <ViewersComp></ViewersComp>
        </div>
        <!-- 场景树 --> <!-- sino更新 -->
        <DraggablePopup2 v-if="showSceneTreeViewRef" @close="showSceneTreeViewRef = false" :title="'图层管理'" :width="300"
            height="calc(50vh - 90px)" :left="0" :top="40" :iconName="'tucengguanli'" :checkIconIsShow="true"
            :iconIschecked="sceneTreeCheckedIcon" :checkFun="() => sceneTreeCheckedIcon = !sceneTreeCheckedIcon">
            <SceneTree v-if="!!sceneTree" :showCheckBox="sceneTreeCheckedIcon" :clickEmpty="clickEmpty" @closeClickEmpty="clickEmpty=false"></SceneTree>
            <div style="height: 20px;" @contextmenu.stop.prevent="clickEmpty=true"></div>
        </DraggablePopup2>
        <!-- 场景树 -->
        <!-- 属性栏 -->
        <DraggablePopup2 v-if="propSceneTree" :title="propSceneTree ? propSceneTree.name + '属性面板' : '属性面板'" :width="280"
            :height="'370px'" :left="0" :top="482" @close="propSceneTree = undefined">
            <ESPropPanel :treeItem="propSceneTree" :key="propTreeKey"></ESPropPanel>
        </DraggablePopup2>
        <!-- 时间线 -->
        <TimeLine v-show="animationShow"></TimeLine>
         <!-- sino更新 -->
         <div class="name" v-if="!previewRef"><input type="text" v-model="name" ></div>
        <div class="info-window">
            <div v-if="!previewRef">信息弹窗尺寸：<input type="text" v-model="infoWidth" > x <input type="text" v-model="infoHeight" ></div>
        </div>
        <DraggablePopup2  :show="jnpftreeControlRef&&showJnpfTreeViewRef" @close="showJnpfTreeViewRef = false" :title="'数据管理'" :width="300" 
            height="calc(50vh - 90px)" :left="0" top="calc(50vh - 20px)" :iconName="'tucengguanli'">
            <jnpfTree :activeMenu="menu"  :xbsjEarthUi="xbsjEarthUi" v-for="menu in jnpfMenuDataActive" :key="menu.id" @updateActivePoint='updateActivePoint' @updateColorPlan="updateColorPlan" @updateMenuListData='updateMenuListData'></jnpfTree>
            <jnpfTree :activeMenu="menu"  :xbsjEarthUi="xbsjEarthUi" v-for="menu in eventModules" :key="menu.id" @updateActivePoint='updateActivePoint' @updateColorPlan="updateColorPlan" @updateMenuListData='updateMenuListData'></jnpfTree>
        </DraggablePopup2>
        <createSceneObj :activeMenu="menu" :xbsjEarthUi="xbsjEarthUi" v-for="menu in jnpfMenuDataActive" :key="menu.id" :list="menu.list" :columnData='menu.columnData' @updateColorPlan="updateColorPlan" @updateActivePoint='updateActivePoint'></createSceneObj>
        <createSceneObj :activeMenu="menu" :xbsjEarthUi="xbsjEarthUi" v-for="menu in eventModules" :key="menu.id" :list="menu.list" :columnData='menu.columnData' @updateColorPlan="updateColorPlan" @updateActivePoint='updateActivePoint'></createSceneObj>
        <pointInfo :xbsjEarthUi="xbsjEarthUi" :activePoint='activePoint' @updateActivePoint='updateActivePoint'></pointInfo>
        <div style="position:absolute;top:100px;right:20px;bottom: 20px;overflow: auto;">
            <colorPlan :mapColorPlan='sub.mapColorPlan' :mapOptions='sub.mapOptions' :activeMenu='sub.activeMenu'  v-for="sub in mapColorPlansActive" :key='sub.activeMenu.moduleId'></colorPlan>
        </div>
        <jnpfMenu v-if='jnpfmenuControlRef' @updateMenuData="updateMenuData" :jnpfMenuData="jnpfMenuData" :preview="previewRef"></jnpfMenu>
        <!-- sino更新 end -->
        <!-- 拾取面板 -->
        <CzmPickResult @close="czmPickResult = false" :list="czmPinkList" v-if="czmPickResult"></CzmPickResult>
        <!-- <UePickResult :jsonResult="uePinkjson" @close="uePickResult = false" v-if="uePickResult"></UePickResult> -->
        <!-- 状态栏 指北针 比例尺-->
        <StatusBar v-if="statusBarShow"></StatusBar>
        <Navigator v-if="navigatorShow" :navigatorScaleRight="navigatorScaleRight"></Navigator>
        <Scale v-if="scaleShow" :navigatorScaleRight="navigatorScaleRight"></Scale>
    </div>
    <!-- <NewTime></NewTime> -->
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, provide, ref, watch, shallowRef } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR, toRefKey } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import DraggablePopup2 from "./components/DraggablePopup2.vue";
import ESPropPanel from './components/eSPropPanel/ESPropPanel.vue';
import SceneTree from "./components/sceneTree/SceneTree.vue";
import ViewersComp from './components/viewers/Viewers.vue';
import { analysis, engine, environment, images, model, vector, plotting, roam, terrain, view, service, search } from './pages'
import CzmPickResult from "./pages/roam/cousePicking/CzmPickResult.vue";
import UePickResult from "./pages/roam/cousePicking/UePickResult.vue";
import { initSceneJson, initSceneWithType, initurl } from './scripts/initializationJson';
import { XbsjEarthUi } from './scripts/xbsjEarthUi';
import TimeLine from "./pages/view/animation/TimeLine.vue";
import { timeToTimestamp, timestampToTime } from './pages/environment/fun';
import StatusBar from "./pages/view/control/StatusBar.vue";
import Navigator from "./pages/view/control/Navigator.vue";
import Scale from "./pages/view/control/Scale.vue";
import NewTime from "./pages/view/animation/newTime/index.vue";
import { $config } from "./scripts/getConfig";
import Menu from "./views/Menu.vue";
import { copyright } from "./copyright"
import { computed } from 'vue';//sino更新
import jnpfTree from "@/components/jnpfTree/jnpfTree.vue" //sino更新
import jnpfMenu from "@/components/jnpfTree/jnpfMenu.vue" //sino更新
import pointInfo from "@/components/jnpfTree/pointInfo.vue" //sino更新
import colorPlan from "@/components/jnpfTree/colorPlan.vue" //sino更新
import createSceneObj from "@/components/jnpfTree/createSceneObj.vue" //sino更新
import { parse } from 'search-params' //sino更新

const props = withDefaults(defineProps<{
    newList?: any
    navType?: string
}>(), {});
const clickEmpty=ref(false)
const xbsjEarthUi = new XbsjEarthUi();
const sceneTree = xbsjEarthUi.getSceneTree()
xbsjEarthUi.czmlabPath = location.origin
// @ts-ignore
window.g_xbsjEarthUi = xbsjEarthUi;
xbsjEarthUi.jsonLoadingEvent.don(() => {
    initSceneWithType(xbsjEarthUi)
    //设置初始化时间的时间戳
    const date = timeToTimestamp(timestampToTime('12', '00'))
    if (xbsjEarthUi.activeViewer) {
        xbsjEarthUi.activeViewer.currentTime = date
    }
})
initurl(xbsjEarthUi)
// initSceneJson(xbsjEarthUi)//sino更新
const czmPickResult = ref(false)
const czmPinkList: any = ref()
const uePickResult = ref(false)
const uePinkjson: any = ref()
provide("xbsjEarthUi", xbsjEarthUi);//所有子组件都可以获取到，不用一层一层传值
provide("sceneTree", sceneTree);//所有子组件都可以获取到，不用一层一层传值

defineExpose({ objectsManager: xbsjEarthUi, sceneTree });
// const showCheckBox = ref(false)
const xbsjEarth = ref<HTMLElement>()
const disposer = createVueDisposer(onBeforeUnmount);
const showSceneTreeViewRef = toVR<boolean>(disposer, [xbsjEarthUi, "showSceneTreeView"])
const propSceneTree = toVR<any>(disposer, [xbsjEarthUi, "propSceneTree"])
const propTreeKey = toRefKey(propSceneTree);

const animationShow = toVR<boolean>(disposer, [xbsjEarthUi, "animationShow"])
const sceneTreeCheckedIcon = toVR<boolean>(disposer, [xbsjEarthUi, "sceneTreeCheckedIcon"])

const navigatorShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "navigatorShow"])
const scaleShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "scaleShow"])
const statusBarShow = toVR<boolean>(disposer, [xbsjEarthUi.navigatorManager, "statusBarShow"])
const navigatorScaleRight = toVR<number>(disposer, [xbsjEarthUi.navigatorManager, "navigatorScaleRight"])

const propTreeRef = toReadonlyVueRef<any>(disposer, [xbsjEarthUi.propUiTreeManager, 'propTree']);
//sino更新
xbsjEarthUi.navigatorManager.navigatorShow = false
xbsjEarthUi.navigatorManager.scaleShow = false
xbsjEarthUi.navigatorManager.statusBarShow = false


const previewRef = toVR<boolean>(disposer, [xbsjEarthUi, "preview"])
const scenetreeControlRef = toVR<boolean>(disposer, [xbsjEarthUi, "sceneTreeControl"])
const jnpftreeControlRef = toVR<boolean>(disposer, [xbsjEarthUi, "jnpfTreeControl"])
const jnpfmenuControlRef = toVR<boolean>(disposer, [xbsjEarthUi, "jnpfMenuControl"])


const showJnpfTreeViewRef = toVR<boolean>(disposer, [xbsjEarthUi, "showJnpfTreeView"])
const name = toVR<boolean>(disposer, [xbsjEarthUi, "name"])//场景名称
const infoWidth = toVR<boolean>(disposer, [xbsjEarthUi, "infoWidth"])//窗口宽度
const infoHeight = toVR<boolean>(disposer, [xbsjEarthUi, "infoHeight"])//窗口高度
const jnpfMenuData = toVR<object>(disposer, [xbsjEarthUi, "jnpfMenu"])//jnpf数据树
const updateMenuData = (data:any)=>{
  jnpfMenuData.value = data
  console.log('jnpfMenuData',jnpfMenuDataActive)
}
const jnpfMenuDataActive = computed(()=>{
    return jnpfMenuData.value.filter(item=>item.isActive)
})
const activeMenu = ref('')
const activePoint = ref({
    moduleId:'',
    dataId:'',
    iframeLinkurl:'',
    title:'',
    subContent:[]
})
const updateActivePoint = (data:any)=>{
    activePoint.value = data
    console.log('updateActivePoint',activePoint)
}
const updateMenuListData = (data:any)=>{
    jnpfMenuDataActive.value.map(menu=>{
        console.log(menu,data.activeMenu)
        if(menu.moduleId==data.activeMenu.moduleId){
            menu.list=data.list
            menu.columnData =data.columnData
        }
    })
}
const mapColorPlans = ref([])
const updateColorPlan = (data:any)=>{
    console.log('mapColorPlans',mapColorPlans.value)
    if(mapColorPlans.value.find(item=>item.activeMenu.id==data.activeMenu.id)) return
    mapColorPlans.value.push(data)
}
const mapColorPlansActive = computed(()=>{
    return mapColorPlans.value.filter(plan=>jnpfMenuDataActive.value.some(menu=>plan.activeMenu.id==menu.id))
    
})

const menuHandle = (data: any)=>{
  activeMenu.value = data
}
interface EventModules{
    moduleId:string,//模块id
    label:string,//模块名称
    showTree:boolean,//是否显示数据树
}
const eventModules = ref<EventModules[]>([])
//查找tree中是否包含某值 
const findInTree = (tree: any, key: any, value: any) => {
    if (!tree || !key) return false
    let temp = false
    var loop = function (a: any, k: any, v: any) {
        a.map((node: any) => {
            if (node[k] == v) {
                temp = node
            } else if (node.children.length > 0) {
                loop(node.children, k, v)
            }
        })
    }
    loop(tree, key, value)
    return temp
}
window.addEventListener('message',function(e:any){
    console.log(e.data)
    let msg:any
    try{
        msg = JSON.parse(e.data)
    }catch{
        msg=''
    }
  if(!msg) return 
  if(msg.type=='addModule'){
    console.log('message', msg)
    msg.modules.map((module:any)=>{
        if( eventModules.value.find(item=>item.moduleId==module.moduleId)) return
        module.id = 'menu-'+Date.now()
        eventModules.value = eventModules.value.concat(module)
    })
  }
  if(msg.type=='removeModule'){
    msg.modules.map((module:any)=>{
        let _index = eventModules.value.findIndex(item=>item.moduleId==module.moduleId)
        if(_index!=-1){
            eventModules.value.splice(_index,1)
        }
        console.log('message',  eventModules.value)
    })
  }
  if(msg.type=='cameraViewsManager'){
    console.log('message', msg)
    xbsjEarthUi.cameraViewsManager.setCurrentView(msg.index)
    xbsjEarthUi.cameraViewsManager.flyToView(msg.index)
  }
  if(msg.type=='setSceneTree'){
    console.log('message', msg)
    const sceneTreeObject: any = [...xbsjEarthUi.getSceneTree().getDescendants()]
    console.log('sceneTreeObject', sceneTreeObject)
    msg.sceneTreeItems.map((sceneTreeItem:any)=>{
        sceneTreeObject.map((item: any)=>{
            if(item.name==sceneTreeItem.name){
                item.show=sceneTreeItem.show
            }
        })
    })
   
  }
  if(msg.type=='switchToUEViewer'){
    console.log('message', msg)
    const options = {
            domid: 'viewersContainer',
            uri: msg.uri,
            app: msg.app,
    }
    xbsjEarthUi.switchToUEViewer(options)
  }
  if(msg.type=='switchToCesiumViewer'){
    console.log('message', msg)
    xbsjEarthUi.switchToCesiumViewer('viewersContainer')
  }
})
//sino更新 end

type list = {
    id: number,
    title: string,
    value: string,
    icon: string,
    component: any,
    isShow?:boolean
}[]
const originalList: list = [
    {
        id: 1,
        title: "搜索",
        value: 'search',
        icon: 'sousuo',
        component: search,
        isShow:true
    },
    {
        id: 2,
        title: "漫游",
        value: 'roam',
        icon: 'manyou',
        component: roam,
        isShow:true
    },
    {
        id: 3,
        title: "视图",
        value: 'view',
        icon: 'shitu',
        component: view,
        isShow:true
    },

    {
        id: 4,
        title: "影像",
        value: 'images',
        icon: 'yingxiang',
        component: images,
        isShow:true
    },
    {
        id: 5,
        title: "瓦片",
        value: 'model',
        icon: 'wapian',
        component: model,
        isShow:true
    },
    {
        id: 6,
        title: "地形",
        value: 'terrain',
        icon: 'dixing',
        component: terrain,
        isShow:true
    },
    {
        id: 7,
        title: "矢量",
        value: 'vector',
        icon: 'shiliang',
        component: vector,
        isShow:true
    },
    {
        id: 8,
        title: "分析",
        value: 'analysis',
        icon: 'fenxi',
        component: analysis,
        isShow:true
    },
    {
        id: 9,
        title: "标绘",
        value: 'plotting',
        icon: 'biaohui',
        component: plotting,
        isShow:true
    },
    {
        id: 11,
        title: "环境",
        value: 'environment',
        icon: 'huanjing',
        component: environment,
        isShow:true
    },
    {
        id: 12,
        title: "引擎",
        value: 'engine',
        icon: 'yinqing',
        component: engine,
        isShow:$config.modelShow
    },
    {
        id: 13,
        title: "服务",
        value: 'service',
        icon: 'fuwu',
        component: service,
        isShow:true
    },
]
const navList = shallowRef()
navList.value = originalList
watch(() => props.newList, () => {
    if (props.newList) {
        navList.value = originalList.concat(props.newList)
    }
}, { immediate: true, deep: true })

onMounted(() => {
    xbsjEarthUi.d(xbsjEarthUi.cesiumPickChanged.don((val) => {
        if (!val) {
            czmPickResult.value = false
        } else {
            czmPinkList.value = val
            czmPickResult.value = true
        }
    }))
    //sino更新
    const search = window.location.search.substring(1) //sino更新
    const parseSearch = parse(search) //sino更新
    if(parseSearch.preview) previewRef.value = true
    if(parseSearch.scenetree=='0') scenetreeControlRef.value = false
    if(parseSearch.jnpftree=='0') jnpftreeControlRef.value = false
    if(parseSearch.jnpfmenu=='0') jnpfmenuControlRef.value = false
    console.log(parseSearch)
    //sino更新 结束

})


</script>

<style scoped>
/* sino更新 */
.xbsj_box {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display:flex;
    flex-direction: column;
}

.xbsj_header {
    width: 100%;
    height: 40px;
    background-color: #2F3034;
    border-bottom: 1px solid #111111;
    box-sizing: border-box;
}

.xbsj_earth {
    width: 100%;
    /* height: calc(100% - 40px); */
    flex:1
}

.sub_menu {
    width: 280px;
    height: calc(100% - 80px);
    position: absolute;
    transition: right 0.4s linear;
    right: 0;
    top: 40px;
    background-color: rgba(37, 38, 42, 0.90);
    z-index: 1;
}

.es_PropPanel {
    position: absolute;
    left: -30px;
    top: 0;
    width: 30px;
    height: 30px;
    background: rgba(37, 38, 42, 1);
    border-bottom: 1px solid rgba(17, 17, 17, 1);
    border-left: 1px solid rgba(17, 17, 17, 1);
    box-sizing: border-box;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.earthui_version {
    position: fixed;
    right: 260px;
    bottom: 0;
    width: 130px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    z-index: 200;
}
/* sino更新 */
.preview .xbsj_header{
    order:1;
    height: 24px;
}
.name{
  position: absolute;
  top:50px;
  left: 50%;
  transform: translateX(-50%);
}
.info-window{
  position: absolute;
  top:50px;
  right: 40px;
  font-size:12px
}
.info-window input{
    width:100px
}
.name > input ,.info-window input{
    flex: 1 1 0%;
    height: 26px;
    background: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    border: 1px solid rgb(59, 60, 64);
    color: rgb(183, 183, 183);
    padding-left: 11px;
    box-sizing: border-box;
}
.new_time_line {
    width: 100%;
    height: 200px;
    position: fixed;
    left: 0;
    top: 200px;
}

</style>
